import React from 'react';
import { Button, Form, Input, message } from 'antd';
import { useNavigate } from "react-router-dom";
import './login.css'

export type FieldType = {
  username?: string;
  password?: string;
  code?: string;
};

const LoginView: React.FC = () => {
  const navigate = useNavigate();
  const OnFinish = (values: FieldType) => {
    if (values.username === 'admin' && values.password === '123456') {
      console.log('Success:', values);
      navigate('/dashboard');
    } else {
      message.error("密码用户名不匹配")
    }
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };

  return (
    <div className='login-form'>
      <div className='login-title'>管理平台</div>
      <Form
        name="basic"
        labelCol={{ span: 5 }}
        wrapperCol={{ span: 16 }}
        style={{ maxWidth: 600 }}
        initialValues={{
          username: "admin",
          password: "123456",
          code: "123456"
        }}
        onFinish={OnFinish}
        onFinishFailed={onFinishFailed}
        autoComplete="off"
      >
        <Form.Item<FieldType>
          label="用户名"
          colon={true}
          name="username"
          rules={[{ required: true, message: '请输入你的用户名!' }]}
        >
          <Input />
        </Form.Item>

        <Form.Item<FieldType>
          label="密码"
          name="password"
          rules={[{ required: true, message: '请输入你的密码!' }]}
        >
          <Input.Password />
        </Form.Item>

        <Form.Item<FieldType>
          label="验证码"
          colon={true}
          name="code"
          rules={[{ required: true, message: '请输入你的验证码!' }]}
        >
          <Input />
        </Form.Item>

        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
          <Button type="primary" htmlType="submit" style={{ width: "100px" }}>
            提交
          </Button>
        </Form.Item>
      </Form>
    </div>
  )
};

export default LoginView